<template>
  <view class="face">
    <view class="icon icon-face" @click="toggleShow"></view>
      <view class="face-main" v-show="show" ref="dialog">
		    <view class="face-main-box"  v-for="(item, index) in list" :key="index">
		    	<view class="face-list"  v-if="currentIndex === index">
		    	 <view  class="face-list-item" v-for="(childrenItem, childrenIndex) in item" :key="childrenIndex" @click="select(childrenItem, childrenIndex)">
		    	    <image class="emo-image"   v-if="index === 0" :src="emojiUrl + emojiMap[childrenItem]"></image>
		    	    <image class="face-img" v-else :src="faceUrl + childrenItem + '@2x.png'"></image>
		    	  </view>
		    	</view>
		    </view>       
        <view class="face-tab" style="border-top: 1px solid #f1f1f1;">
          <view  class="face-tab-item" @click="selectFace(0)">
            <view class="icon icon-face">
			        <image class="face-icon"   src="../../../../../assets/icon/emoji.svg"></image>
		        </view>
          </view>
          <view  class="face-tab-item" v-for="(item, index) in bigEmojiList" :key="index" @click="selectFace(index+1)">
            <image class="face-icon"  :src="faceUrl + item.icon + '@2x.png'"></image>
          </view>
  	      <view class="icon icon-qingchu" @click="handleClearMessage"></view>
         </view>
      </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, reactive, watchEffect, toRefs, computed, ref } from 'vue';
import { emojiUrl, emojiMap, emojiName, faceUrl, bigEmojiList } from "../../../../../utils/emojiMap";

// import TUIMessage from '../../../../components/message';
// import { onClickOutside } from '@vueuse/core';

const Face = defineComponent({
  props: {
    show: {
      type: Boolean,
      default: () => false,
    },
    isMute: {
      type: Boolean,
      default: () => false,
    },
  },
  setup(props:any, ctx:any) {
    const data = reactive({
      emojiUrl,
      emojiMap,
      emojiName,
      faceUrl,
      bigEmojiList,
      show: false,
      currentIndex: 0,
      isMute: false,
    });

    const dialog:any = ref();

    watchEffect(() => {
      data.show = props.show;
      data.isMute = props.isMute;
    });

    const toggleShow = () => {
      if (!data.isMute) {
        data.show = !data.show;
      }
      if (!data.show) {
        selectFace(0);
      }
    };

    // onClickOutside(dialog, () => {
    //   data.show = false;
    // });

    const select = async (item:string, index?:number) => {
      const options:any = {
        name: item,
      };
			
      if (data.currentIndex === 0) {
        options.type = 'emo';
        options.url = emojiUrl + emojiMap[item];
        options.template = `<image src="${emojiUrl + emojiMap[item]}"></image>`;
        // toggleShow();
        return ctx.emit('send', options);
      }
      try {
        await uni.$TUIKit.TUIChatServer.sendFaceMessage({
          index,
          data: item,
        });
      } catch (error) {
      //   TUIMessage({ message: error });
       }
      // toggleShow();
    };

    const list = computed(() => {
      const emjiList = [data.emojiName];
      for (let i = 0; i < data.bigEmojiList.length; i++) {
        emjiList.push(data.bigEmojiList[i].list);
      }
      return emjiList;
    });

    const selectFace = (index:number) => {
      data.currentIndex = index;
    };
		const handleClearMessage = () => {
			return ctx.emit('handleClearMessage')
		};
    const handleSendEmoji = () => {
			return ctx.emit('handleSendEmoji')
		};
    return {
      ...toRefs(data),
      toggleShow,
      select,
      selectFace,
      list,
      dialog,
			handleSendEmoji,
			handleClearMessage
    };
  },
});
export default Face;
</script>

<style lang="scss" scoped>
.face {
  position: relative;
  cursor: pointer;
	width: 100%;
	height: 100%;
  &-main {
    position: absolute;
    // z-index: 5;
    width: 100%;
    height: 100%;
    background: #ffffff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
     display: flex;
    flex-direction: column;
  }
	&-main-box {
		width: 100%;
		height: 80%;
		// box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		display: flex;
		flex-direction: column;
	}
  &-list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
		padding-left:5rpx;
    &-item {
      padding: 7px;
			.emo-image {
				display: block;
			  height: 30px;
				width: 30px;
			}
    }
    .face-img {
			display: block;
      width: 60px;
			height: 60px;
    }
  }
  &-tab {
    display: flex;
    align-items: center;
    &-item {
      padding: 8px;
			.face-icon {
				display: block;
				height: 30px;
				width: 30px;
			}
      img {
        width: 30px;
      }
    }
		.send-btn {
			position: absolute;
			background-color: #55C06A;
			color: #ffffff;
			line-height: 30px;
			font-size: 13px;
			text-align: center;
			width: 50px;
			height: 30px;
			right: 0;
			bottom: 10px;
		}
  }
}
.icon-qingchu {
	position: fixed;
	bottom: 20rpx;
	right: 40rpx;
	width: 50rpx;
	height: 40rpx;
	text-align: center;
	line-height: 40rpx;
	background-color: #fff;
	color: #bcbebe;
	font-size:54rpx;
}
</style>
